{extend name="personal/index" /}

  {block name="center"}
  <link rel="stylesheet" href="static/smalledit/lib/css/bootstrap.css"/>
      <div class="plc_main">
        <!--右侧开始-->
        <div class="main_cont">
          <div class="path_title">
            <span class="photo_title" id="ptitle" petname="默认相册" content="" picid="1309768"
            petid="">
              我的相册
            </span>
            <a class="return" href="indexAlbumIndex" title="返回相册首页&gt;&gt;">
              返回相册首页&gt;&gt;
            </a>
          </div>


          <div class="photo_toolbar">
            <a class="u_photo_btn" href="indexAlbumAddimg" target="_self" title="上传照片">
            </a>
            <span class="name">
              默认相册
            </span>
              <a href="indexAlbumDelalbum?id={$album.id}">删除相册</a>
              
          </div>


          <!--相片列表开始-->
          <div class="photo_list">
            <ul>

<!-- {php}var_dump($imgList);{/php} -->

            {volist name="imgList" id="imgs"}
              <li class="viw">
                <div class="img_show">
                  <div class="delete" data_id={$imgs.id} style="position: absolute;background-color: #000; color:#fff;display: none; cursor: pointer;">
                    删除
                  </div>
                  <a href="" style="display: block; overflow: hidden; width: 160px; height: 160px;">
                    <img src="uploads/{$imgs.src}" style="display: block; width:168px; height: 168px;">
                  </a>
                </div>

                <div class="img_title">
                  <a class="imgname" title="点击修改相片名" style="display: block">
                    {$imgs.imgname}
                  </a>
                  <input class="input_bk photo_txt none imgedit" title="鼠标移出自动完成修改" type="text"
                  name="imgname" value="{$imgs.imgname}" style="display: none">
                  <input type="hidden" name="id" value="{$imgs.id}">
                </div>
              </li>
            {/volist}

            </ul>
          </div>
          <!--相片列表结束-->
          <!--分页开始-->
          <div class="page_wrap">
          {$imgList->render()}
            <div class="showpage">
            </div>
          </div>
          <!--分页结束-->
        </div>
        <!--右侧结束-->
      </div>


      <script>
        $('.imgname').click(function(){
          $(this).hide();
          $(this).next('input').show();
        })

        $('.imgedit').blur(function(){
          var _this = $(this);
          var info = $(this).parent().children('input').serialize();
            $.ajax({
              type: 'post',
              url: "indexAlbumEditimg",
              data: info,
              dataType:'json',
              success: function(data){
                if(data === '保存信息成功'){
                  _this.hide();
                  _this.prev().show();
                  _this.prev().html(_this.val());
                }else{
                  alert(data);
                }
                // location.reload();
              }
            });
        })


        // 删除
        $('.img_show').hover(
          function(){
            $(this).children('div').show();
        },
          function(){
            $(this).children('div').hide();
        });


        $('.delete').click(function(){

          var _this = $(this);
          var info = $(this).attr('data_id');
          $.ajax({
              type: 'get',
              url: "indexAlbumDelimg",
              data: 'id='+info,
              dataType:'json',
              success: function(data){
                $(_this).parent().parent().remove();
              }
            });
        })





      </script>

    {/block}